<template>
  <jl-base>

    <jl-header>
      <mt-header title="新增要货单" :fixed="true">
        <i slot="left">
          <mt-button icon="back" @click="back"></mt-button>
        </i>
      </mt-header>
    </jl-header>

    <jl-content>
      <mt-navbar v-model="selected" class="mb10">
        <mt-tab-item id="base">基本信息</mt-tab-item>
        <mt-tab-item id="goods">商品信息</mt-tab-item>
      </mt-navbar>

      <mt-tab-container v-model="selected">
        <mt-tab-container-item id="base">
          <div class="dld_body">
            <jl-from-input label="登录单" disabled v-model="list.GCDLD01"/>
            <jl-from-input label="配送方式" disabled v-model="list.PSFS"/>
            <jl-from-input disabled label="配送时间" v-model="list.PSSJ"/>

            <jl-from-input disabled label="配送联系人" v-model="list.KHXM_INPUT"/>
            <jl-from-input disabled label="配送联系方式" v-model="list.KHDH"/>

            <jl-from-input label="配送地址" disabled v-model="list.SHDZ"/>

          </div>

          <div class="dld_body">

            <jl-from-input label="保证金比例(%)" disabled v-model="list.BZJBL"/>

          </div>
        </mt-tab-container-item>
      </mt-tab-container>

      <mt-tab-container v-model="selected">
        <mt-tab-container-item id="goods">
          <template v-for="item in list.SPLB">
            <div class="dld_title">
              <span class="fl">{{item.GCSPMC}}</span>
              <span class="fl ml20"><i class="fa fa-phone-square mr5"></i>{{item.LXDHMX}}</span>
            </div>
            <div class="dld_body">

              <div class="jl_list">
                <div class="jl_list_item bor_bottom">
                  <span class="w12">{{item.GCSPMC}}</span>
                </div>
              </div>

              <jl-from-input disabled label="本次要货" v-model="item.YHSL"/>
              <jl-from-input disabled label="批复单价" :value="item.FXDJ | money"/>
              <jl-from-input disabled label="本次要货金额" :value="item.PFJE | money"/>
              <jl-from-input label="备注" v-model="item.BZ"/>
            </div>
          </template>
        </mt-tab-container-item>
      </mt-tab-container>

    </jl-content>
  </jl-base>
</template>

<script>
  export default {
    data() {
      return {
        selected: 'base',
        jlbh: '',
        bdbh: '',
        list: {}
      }
    },
    methods: {
      back() {
        this.$router.back()
      },
      initData() {
        this.http.find("SCM_GCYHD", {
          bdbh: this.bdbh,
          jlbh: this.jlbh,
        })
          .then(v => {
            let azdz = v[0]['SHDZ'];
            let SHDZ = '';
            if (!$Utils.isNull(azdz)) {
              for (let i = 0; i < azdz.length; i++) {
                if (i == 0) {
                  SHDZ = azdz[i]['VALUE']
                } else {
                  SHDZ = SHDZ + '-' + azdz[i]['VALUE']
                }
              }
            }
            v[0]['SHDZ'] = SHDZ;
            v[0]['PSFS'] = v[0]['PSFS']['value'];
            this.list = Object.assign({}, this.list, v[0])
          })
      },
    },
    created() {
      if (!$Utils.isNull(this.$route.params.item)) {
        this.jlbh = this.$route.params.item['JLBH'];
        this.bdbh = this.$route.params.item['BDBH'];
        this.initData();
      }
    },
  }
</script>

<style scoped>

</style>
